<template>
    <el-form ref="form"
             :model="form"
             label-width="80px">
        <el-form-item label="菜单名称">
            <el-input v-model="form.menuName"></el-input>
        </el-form-item>
        <el-form-item label="菜单路径">
            <el-input v-model="form.url"></el-input>
        </el-form-item>
        <el-form-item label="菜单类型">
            <el-select v-model="form.type"
                       placeholder="请选择菜单类型">
                <el-option label="菜单"
                           value="0">
                </el-option>
                <el-option label="按钮"
                           value="1">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="父级菜单">
            <el-cascader :options="menuOptions"
                         v-model="form.parentId"
                         :show-all-levels="false"
                         :props="{ checkStrictly: true }"
                         clearable>
            </el-cascader>
        </el-form-item>
        <el-form-item label="菜单排序">
            <el-input v-model="form.orderNum"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary"
                       @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
export default {
    data() {
        return {
            menuOptions: [
                {
                    label: '顶级菜单',
                    value: '0'
                }
            ],
            form: {
                menuName: '',
                url: '',
                parentId: '0',
                orderNum: '',
                icon: '',
                type: '', // 0菜单 1按钮
            }
        }
    },
    mounted() {
        this.getMenuList()
    },
    methods: {
        initData(row, type) {
            if (!row) return;
            this.form = {
                menuName: row.title,
                url: row.href,
                parentId: type ? row.id : row.parentId,
                orderNum: String(row.data.orderNum),
                icon: '',
                type: row.data.type,
            }
        },
        getMenuList() {
            let menuList = []
            this.$service.getmenu().then(res => {
                res.data.forEach(p => {
                    let param = {
                        label: p.title,
                        value: p.id,
                        children: []
                    }
                    p.children.forEach(c => {
                        param.children.push({
                            label: c.title,
                            value: c.id,
                        })
                    })
                    this.menuOptions.push(param)
                })

            })
        },
        onSubmit() {
            console.log('submit!');
        }
    }
}
</script>

<style>
</style>